Iterate on mockups based on feedback from crit sessions 基於評審反饋迭代模型設計

五個行動項回顧

這是本次設計評審後決定執行的五項任務：

1. 為狗狗選擇流程設計更多螢幕（支援只有一隻狗的使用者）。

2. 確保所有按鈕高度和寬度一致。

3. 檢查並統一按鈕的位置（x/y座標）。

4. 簡化螢幕頂部的圖示設計。

5. 檢查並最佳化橙色的顏色對比度以符合可訪問性標準。

動作一：最佳化"選擇狗狗"流程

背景：Salvador 提問"如果使用者只有一隻狗會怎樣？"

改動：

• 原設計：列出多隻狗供選擇。

• 新設計：當使用者只有一隻狗時，自動選中，無需手動點選。

• 好處：節省時間，簡化流程。

動作二：按鈕尺寸統一

• 在 Figma 中逐一檢查所有按鈕的尺寸。

• 結果發現大多數按鈕尺寸一致，只有一個不同，已調整。

動作三：統一按鈕位置

• 使用 Figma 檢查按鈕位置的 x（橫軸）與 y（縱軸）值。

• 所有"下一步"按鈕都對齊於：x=16, y=8。

• 方法：點選按鈕 → 檢視右側面板 → 查詢位置（Position）數值。

動作四：簡化頂部圖示設計

• 原設計：圖示包裹在圓形中，下面有文字標籤。

• Shabi 建議"視覺上過於繁雜"。

• 新設計：圖示無圓環、無文字，更加簡潔清晰。

• 說明：有些改動需要多輪嘗試與迭代，這是設計常態。

動作五：最佳化橙色按鈕顏色的可訪問性

• 使用 WebAIM 的對比工具測試橙色與白色背景的對比度。

• 原始顏色不符合可訪問性標準（WCAG）。

• 替換為更深的橙色#D53E0B，透過 AAA 級對比標準。

• 統一更改方式：

• 在 sticker sheet 中統一替換按鈕、圖示、評分星星和文字顏色。

• 使用"Selection Colors"功能一次性替換多個元件顏色。

小技巧（Pro Tip）

不必一個一個更換顏色！在 Figma 中，框選所有按鈕與圖示→ 在右側"Selection Colors"中統一更換顏色，即可快速完成大規模替換。